<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 
        过滤器的使用
        需要处理的数据 | 过滤器调用(...传入数据值)
        -->
        <p>{{message}}</p>
        <p>{{message | msgFormatter1}}</p>
        <p>{{message | msgFormatter2('html', 'css')}}</p>
        <p>{{message | msgFormatter}}</p>
    </div>
    <script src="./assets/vue.js"></script>
    <script>
        /**
         * 过滤器是用于数据处理
         * 1.全局定义：在当前项目中任意“页面”上都可以使用
         * Vue.filter(过滤器名称, 处理数据的函数(源数据, ...传入数据){});
         */ 
        Vue.filter('msgFormatter1', function(source) {
            // 处理数据的函数必须有返回值
            // return '##' + source + '##';
            return `##${source}##`;
        });
        Vue.filter('msgFormatter2', function(source, param1, param2) {
            return `${param1}##${source}##${param2}`;
        });
        let vm = new Vue({
            el: '#app',
            data: {
                message: 'hello vuejs'
            },
            /**
             * 2.局部定义，私有定义：仅能在当前“页面”中使用
             */
            filters: {
                msgFormatter(source) {
                    return source + '2024';
                }
            }
        });
    </script>
</body>
</html>